<!doctype html>
<html class="h-full w-full" data-theme="dark">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>{{ title }}</title>
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/public/css/tailwind.css" rel="stylesheet">
    <link href="/public/css/home.css" rel="stylesheet">
    <link href="/public/css/animate.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
        integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <meta name="description" content="A beautiful, online alternative to the popular Exploding Kittens card game (just with chickens). Who will be the last one standing?" />
    <link rel="apple-touch-icon" sizes="180x180" href="/public/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/public/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/public/favicon/favicon-16x16.png">
    <link rel="manifest" href="/public/favicon/site.webmanifest">
    <link rel="canonical" href="https://chickens.rakerman.com/" />
    <meta name="referrer" content="no-referrer-when-downgrade" />
    <meta property="og:site_name" content="Exploding Chickens" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Exploding Chickens" />
    <meta property="og:description" content="A beautiful, online alternative to the popular Exploding Kittens card game (just with chickens). Who will be the last one standing?" />
    <meta property="og:url" content="https://chickens.rakerman.com/" />
    <meta property="og:image" content="https://chickens.rakerman.com/public/home_ui.png" />
    <meta property="og:image:width" content="800" />
    <meta property="og:image:height" content="440" />
</head>
<!-- Exploding Chickens, home page // RAk3rman -->
<body class="leading-normal tracking-normal text-indigo-400 bg-cover bg-fixed anim-scene" style="background-image: url('/public/home_back.jpg');background-color: #0f0f0f;">
{{! Banner }}
<div class="bg-indigo-600 hidden" id="banner">
    <div class="px-6">
        <div class="w-full container mx-auto py-3">
            <div class="w-full flex items-center justify-between">
                <div class="w-0 flex-1 flex items-center">
                <span class="flex p-2 rounded-lg bg-indigo-800">
                    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
                    </svg>
                </span>
                    <p class="ml-3 font-medium text-white truncate">
                        <span class="md:hidden">
                            {{ bnr_short_desc }}
                        </span>
                        <span class="hidden md:inline">
                            {{ bnr_long_desc }}
                        </span>
                    </p>
                </div>
                <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
                    <button type="button" class="-mr-1 flex p-2 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2" onclick="hide_banner()">
                        <span class="sr-only">Dismiss</span>
                        <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="h-full mx-6 mb-6 pt-6">
    {{! Header }}
    <div class="w-full container mx-auto anim-ele anim-ele-fadein">
        <div class="w-full flex items-center justify-between">
            <div class="flex-shrink-0">
                <h1 class="h-8 text-4xl text-white opacity-80" style="font-family: Bebas Neue"><a class="text-primary">EXPLODING</a> CHICKENS</h1>
            </div>
            <div class="flex w-1/2 justify-end content-center">
                <a class="inline-block text-white opacity-80 no-underline hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 transform hover:scale-125 duration-300 ease-in-out" href="https://github.com/rak3rman/exploding-chickens" target="_blank">
                    <svg class="fill-current h-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                </a>
            </div>
        </div>
    </div>
    {{! Landing Text }}
    <div class="container pt-24 md:pt-56 mx-auto flex flex-wrap flex-col md:flex-row items-center anim-ele anim-ele-fadein">
        <div class="flex flex-col w-full xl:w-2/5 justify-center lg:items-start overflow-y-hidden">
            <h1 class="my-4 text-4xl md:text-5xl text-white opacity-80 font-bold leading-tight text-left">
                Ba-da bing!
                <span class="block sm:inline-block lg:pt-1.5">
                    Ba-da
                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-red-500 to-yellow-500">
                        boom!
                    </span>
                </span>
            </h1>
            <p class="leading-normal text-white opacity-80 text-lg md:text-2xl mb-2 text-left">
                A beautiful, online alternative to the popular Exploding Kittens card game (just with chickens)
            </p>
            <p class="leading-normal text-white opacity-80 text-lg md:text-2xl mb-8 text-left">
                <strong>{{ stat_games_played }}</strong> games played.
                <strong>{{ stat_explosions }}</strong> chickens exploded.
            </p>
            <div class="flex flex-wrap space-y-4 sm:space-y-0 sm:space-x-4 text-center">
                <form class="pr-3 mb-3" action="/lobby" method="POST" enctype="application/x-www-form-urlencoded">
                    <button type="submit" class="w-auto sm:h-14 h-12 flex-none bg-yellow-500 hover:bg-yellow-600 text-gray-100 text-lg font-semibold px-6 border border-transparent rounded-xl focus:outline-none transition-colors duration-200">
                        New Lobby
                    </button>
                </form>
                <div class="bg-transparent" style="margin-left: 0; margin-top: 0">
                    <div class="container flex justify-center items-center">
                        <div class="relative">
                            <div class="absolute sm:top-4 top-3 left-3">
                                <i class="fa fa-search text-gray-400"></i>
                            </div>
                            <input type="text" id="slug_input" onkeyup="check_lobby_slug()" maxlength="30" class="sm:h-14 h-12 w-80 pl-9 pr-8 rounded-xl text-lg z-0 bg-transparent text-gray-400 border-2 border-gray-500 focus:outline-none" placeholder="Enter lobby code...">
                            <div class="absolute sm:top-4 top-3 right-3" id="slug_indicator"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{! UI Demo }}
        <div class="w-full xl:w-3/5 p-2 sm:p-6 pt-20 overflow-hidden">
            <img class="mx-auto w-full md:w-11/12 transform -rotate-6 transition hover:scale-105 duration-700 ease-in-out hover:-rotate-3" src="/public/game_ui.png" />
        </div>
        {{! How to Play }}
        <div class="flex flex-col w-full justify-center overflow-y-hidden pt-20">
            <h1 class="my-4 text-4xl md:text-5xl text-white opacity-80 font-bold leading-tight text-left">
                How to <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-red-500 to-yellow-500">Play</span>
            </h1>
            <p class="leading-normal text-white opacity-80 text-lg md:text-2xl mb-8 text-left">
                The first rule of Exploding Chickens is simple. Don't explode.
            </p>
        </div>
        {{! How to Play: Game Structure }}
        <div class="flex flex-col w-full justify-center overflow-y-hidden pt-2 pb-2" id="game-structure">
            <p class="leading-normal text-white opacity-80 text-2xl md:text-3xl text-left">
                Game Structure
            </p>
            <p class="leading-normal text-white opacity-60 text-lg md:text-2xl pt-1.5 text-left">
                2-6 players per room. {{ stats_avg_play_time }} min average play time.
            </p>
        </div>
        <div class="space-y-10 md:space-y-0 md:grid md:grid-flow-row md:grid-cols-5 md:grid-rows-4 md:gap-x-8 md:gap-y-10">
            <div class="flex justify-center items-center md:col-span-3 mt-6">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <h1 class="px-6 text-6xl text-white opacity-80 font-bold leading-tight text-left">
                            <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-red-500 to-yellow-500">1</span>
                        </h1>
                    </div>
                    <div class="md:ml-4">
                        <dt class="text-xl text-white opacity-80">
                            Understanding the Basics
                        </dt>
                        <dd class="mt-2 mr-8 text-lg text-white opacity-60">
                            Exploding Chickens is a card game based on both <strong>luck and strategy</strong>. Throughout the game, you draw cards from the deck which can either secure your victory or lead to your explosive demise. <strong>Action cards</strong> help give you an advantage over your opponents. But beware: <i>the deadly Exploding Chicken is also hidden in the mix.</i>
                        </dd>
                    </div>
                </div>
            </div>
            <div class="flex justify-center items-center md:col-span-2">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1 transform scale-100 -rotate-12 transition hover:scale-105 duration-500 ease-in-out" 
                    style="background-image: url('/public/cards/base/defuse-3.png');"></div>
                </div>
                <div class="flex-shrink-0 hidden md:block">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain -mt-5 -ml-12 transform scale-100 transition hover:scale-105 duration-500 ease-in-out" 
                    style="background-image: url('/public/cards/base/skip-2.png');"></div>
                </div>
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain -ml-12 transform scale-100 rotate-12 transition hover:scale-105 duration-500 ease-in-out" 
                    style="background-image: url('/public/cards/base/chicken.png');"></div>
                </div>
            </div>
            <div class="flex justify-center items-center md:col-span-3 md:hidden">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <h1 class="px-6 text-6xl text-white opacity-80 font-bold leading-tight text-left">
                            <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-red-500 to-yellow-500">2</span>
                        </h1>
                    </div>
                    <div class="md:ml-4">
                        <dt class="text-xl text-white opacity-80">
                            Taking your Turn
                        </dt>
                        <dd class="mt-2 mr-8 text-lg text-white opacity-60">
                            At the start of your turn, you can <strong>play as many (or as few) action cards as you’d like</strong>. That is, as long as the circumstances permit. Some unique cards will allow you to skip your turn entirely while others can force you to draw multiple times. Just follow the cards instructions below on how to play each action card. <strong>End your turn by drawing a card from the deck</strong>.
                        </dd>
                    </div>
                </div>
            </div>
            <div class="flex justify-center items-center md:col-span-2">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1 transform scale-100 -rotate-12 transition hover:scale-105 duration-500 ease-in-out"
                         style="background-image: url('/public/cards/base/attack-4.png');"></div>
                </div>
                <div class="flex-shrink-0 hidden md:block">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain -mt-5 -ml-12 transform scale-100 transition hover:scale-105 duration-500 ease-in-out"
                         style="background-image: url('/public/cards/base/favor-2.png');"></div>
                </div>
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain -ml-12 transform scale-100 rotate-12 transition hover:scale-105 duration-500 ease-in-out"
                         style="background-image: url('/public/cards/base/seethefuture-2.png');"></div>
                </div>
            </div>
            <div class="md:flex justify-center items-center md:col-span-3 hidden">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <h1 class="px-6 text-6xl text-white opacity-80 font-bold leading-tight text-left">
                            <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-red-500 to-yellow-500">2</span>
                        </h1>
                    </div>
                    <div class="md:ml-4">
                        <dt class="text-xl text-white opacity-80">
                            Taking your Turn
                        </dt>
                        <dd class="mt-2 mr-8 text-lg text-white opacity-60">
                            At the start of your turn, you can <strong>play as many (or as few) action cards as you’d like</strong>. That is, as long as the circumstances permit. Some unique cards will allow you to skip your turn entirely while others can force you to draw multiple times. Just follow the cards instructions below on how to play each action card. <strong>End your turn by drawing a card from the deck</strong>.
                        </dd>
                    </div>
                </div>
            </div>
            <div class="flex justify-center items-center md:col-span-3">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <h1 class="px-6 text-6xl text-white opacity-80 font-bold leading-tight text-left">
                            <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-red-500 to-yellow-500">3</span>
                        </h1>
                    </div>
                    <div class="md:ml-4">
                        <dt class="text-xl text-white opacity-80">
                            Drawing an Exploding Chicken
                        </dt>
                        <dd class="mt-2 mr-8 text-lg text-white opacity-60">
                            When you continue drawing card after card in the game, there comes a point where someone will draw an Exploding Chicken. If that’s you, you have two options: <strong>defuse the ticking time bomb</strong> or <strong>say goodbye to your chances of winning</strong>. The number of Exploding Chickens is always <strong>one less</strong> than the number of players alive.
                        </dd>
                    </div>
                </div>
            </div>
            <div class="flex justify-center items-center md:col-span-2">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/card_back.png');"></div>
                </div>
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/base/chicken.png');"></div>
                </div>
            </div>
            <div class="flex justify-center items-center md:col-span-3 md:hidden">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <h1 class="px-6 text-6xl text-white opacity-80 font-bold leading-tight text-left">
                            <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-red-500 to-yellow-500">4</span>
                        </h1>
                    </div>
                    <div class="md:ml-4">
                        <dt class="text-xl text-white opacity-80">
                            Winner Winner Chicken Dinner
                        </dt>
                        <dd class="mt-2 mr-8 text-lg text-white opacity-60">
                            Winning the game is pretty simple. Use whatever cards at your disposal, combined with your smarts, to be <strong>the last person alive</strong>. After you witness each of your friends fall one by one to the wrath of the Exploding Chicken, congratulations! You’ve claimed the bragging rights to one of the most explosive games on the planet. <i>Don’t let them forget.</i>
                        </dd>
                    </div>
                </div>
            </div>
            <div class="flow-root py-6 md:col-span-2">
                <div class="flex justify-center items-center">
                    <div class="block text-center mb-3">
                        <h1 class="text-white font-medium text-sm">
                            Sengdao <span class="animate-pulse inline-flex rounded-full h-1.5 w-1.5 mb-0.5 align-middle bg-green-500"></span>
                        </h1>
                        <div class="flex flex-col items-center -space-y-3 px-3">
                            <img class="h-12 w-12 rounded-full filter grayscale" src="/public/avatars/puma.png" alt="">
                            <div class="inline-block">
                                <div class="-space-x-4 rotate-12 inline-block">
                                    <div class="transform inline-block rounded-md bg-red-500 shadow-md h-5 w-4">
                                        <h1 class="text-white text-sm"><i class="fas fa-skull-crossbones"></i></h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="mx-2 mb-3 bg-gray-400 p-1 rounded-full text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                        <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
                        </svg>
                    </button>
                    <div class="block text-center mb-3">
                        <h1 class="text-white font-medium text-sm">
                            Vincent <span class="animate-pulse inline-flex rounded-full h-1.5 w-1.5 mb-0.5  align-middle bg-green-500"></span>
                        </h1>
                        <div class="flex flex-col items-center -space-y-3 px-3"><img class="h-12 w-12 rounded-full " src="/public/avatars/bull.png" alt="">
                            <div class="inline-block">
                                <div class="-space-x-4 rotate-12 inline-block">
                                    <div class="transform inline-block rounded-md bg-gray-800 shadow-md h-5 w-4" style="--tw-rotate: -18deg"><h1 class="text-gray-700 text-sm">1</h1></div>
                                    <div class="transform inline-block rounded-md bg-gray-700 shadow-md h-5 w-4 -rotate-6"><h1 class="text-gray-700 text-sm">1</h1></div>
                                    <div class="transform inline-block rounded-md bg-gray-600 shadow-md h-5 w-4 rotate-6"><h1 class="text-gray-600 text-sm">1</h1></div>
                                    <div class="transform inline-block rounded-md bg-gray-500 shadow-md h-5 w-4" style="--tw-rotate: 18deg">
                                        <h1 class="text-white text-sm">4</h1>
                                    </div>
                                </div>
                                <div class="transform inline-block rounded-md bg-blue-500 shadow-md h-5 w-4 ml-1">
                                    <h1 class="text-white text-sm">1</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="mx-2 mb-3 bg-gray-400 p-1 rounded-full text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                        <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
                        </svg>
                    </button>
                    <div class="block text-center mb-3">
                        <h1 class="text-white font-medium text-sm">
                            Radison <span class="animate-pulse inline-flex rounded-full h-1.5 w-1.5 mb-0.5  align-middle bg-green-500"></span>
                        </h1>
                        <div class="flex flex-col items-center -space-y-3 px-3"><img class="h-12 w-12 rounded-full filter grayscale" src="/public/avatars/wolf.png" alt="">
                            <div class="inline-block">
                                <div class="-space-x-4 rotate-12 inline-block">
                                    <div class="transform inline-block rounded-md bg-red-500 shadow-md h-5 w-4">
                                        <h1 class="text-white text-sm"><i class="fas fa-skull-crossbones"></i></h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-center items-center">
                    <div class="block text-center">
                        <h1 class="text-white font-medium text-sm">
                            Richard <span class="animate-pulse inline-flex rounded-full h-1.5 w-1.5 mb-0.5 align-middle bg-green-500"></span>
                        </h1>
                        <div class="flex flex-col items-center -space-y-3 px-3">
                            <img class="h-12 w-12 rounded-full filter grayscale" src="/public/avatars/lion.png" alt="">
                            <div class="inline-block">
                                <div class="-space-x-4 rotate-12 inline-block">
                                    <div class="transform inline-block rounded-md bg-red-500 shadow-md h-5 w-4">
                                        <h1 class="text-white text-sm"><i class="fas fa-skull-crossbones"></i></h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="mx-2 mb-3 bg-gray-400 p-1 rounded-full text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                        <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
                        </svg>
                    </button>
                    <div class="block text-center">
                        <h1 class="text-white font-medium text-sm">
                            Nathanael <span class="animate-pulse inline-flex rounded-full h-1.5 w-1.5 mb-0.5  align-middle bg-green-500"></span>
                        </h1>
                        <div class="flex flex-col items-center -space-y-3 px-3"><img class="h-12 w-12 rounded-full filter grayscale" src="/public/avatars/bear.png" alt="">
                            <div class="inline-block">
                                <div class="-space-x-4 rotate-12 inline-block">
                                    <div class="transform inline-block rounded-md bg-red-500 shadow-md h-5 w-4">
                                        <h1 class="text-white text-sm"><i class="fas fa-skull-crossbones"></i></h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="md:flex justify-center items-center md:col-span-3 hidden">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <h1 class="px-6 text-6xl text-white opacity-80 font-bold leading-tight text-left">
                            <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-red-500 to-yellow-500">4</span>
                        </h1>
                    </div>
                    <div class="md:ml-4">
                        <dt class="text-xl text-white opacity-80">
                            Winner Winner Chicken Dinner
                        </dt>
                        <dd class="mt-2 mr-8 text-lg text-white opacity-60">
                            Winning the game is pretty simple. Use whatever cards at your disposal, combined with your smarts, to be <strong>the last person alive</strong>. After you witness each of your friends fall one by one to the wrath of the Exploding Chicken, congratulations! You’ve claimed the bragging rights to one of the most explosive games on the planet. <i>Don’t let them forget.</i>
                        </dd>
                    </div>
                </div>
            </div>
        </div>
        {{! How to Play: Base Card Pack }}
        <div class="flex flex-col w-full justify-center overflow-y-hidden pt-10 pb-5" id="base-pack">
            <p class="leading-normal text-white opacity-80 text-2xl md:text-3xl text-left">
                Base Pack
            </p>
            <p class="leading-normal text-white opacity-60 text-lg md:text-2xl pt-1.5 text-left">
                The classics. Used by default in every game.
            </p>
        </div>
        <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 xl:grid-cols-3 md:gap-x-8 md:gap-y-10">
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/base/chicken.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        The <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-red-500 to-yellow-500">Exploding</span> Chicken <i class="opacity-30 text-lg">x1-5</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        Avoid this little guy <i>at all costs</i>. Once this card is drawn, you must use a defuse card to stop the ticking time bomb. If you don't have a defuse card, it looks like your time is up.
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/base/defuse-1.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Defuse <i class="opacity-30 text-lg">x6</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        Clip the wires and stop the Exploding Chicken from exploding. Once defused, the player puts the Exploding Chicken back in the deck wherever they'd like.
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/base/attack-3.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Attack <i class="opacity-30 text-lg">x4</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        Seek vengeance on your friends by forcing the next player in line to take 2 turns. Attack cards can be stacked to force the next player to take 4, 6, and even 8+ turns.
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/base/seethefuture-4.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        See the Future <i class="opacity-30 text-lg">x5</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        Allow yourself to see the top three cards in the deck. Be quick though, because you only have 5 seconds. Does not count as a turn.
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/base/skip-3.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Skip <i class="opacity-30 text-lg">x4</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        Effectively skips your turn without having to draw a card. If you are stuck with multiple turns, the skip card only removes one turn.
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/base/reverse-1.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Reverse <i class="opacity-30 text-lg">x4</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        Skips your turn and reverses the turn direction, all without having to draw a card. If you are stuck with multiple turns, the reverse card only removes one turn.
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/base/shuffle-1.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Shuffle <i class="opacity-30 text-lg">x4</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        Shuffles the deck to <i>hopefully</i> decrease your odds at drawing an Exploding Chicken. Plain and simple. Does not count as a turn.
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/base/favor-1.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Favor <i class="opacity-30 text-lg">x4</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        Allows you to ask for a favor <i>(aka steal a card)</i> from anyone still in the game. Your target really can't do much about it. Does not count as a turn.
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/base/randchick-1.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Random Chickens <i class="opacity-30 text-lg">x4(4)</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        Does the exact same thing as the favor card with a small caveat. You must have <strong>two identical</strong> random chickens to use this action. Both cards will be discarded.
                    </dd>
                </div>
            </div>
        </div>
        {{! How to Play: Yolking Around }}
        <div class="flex flex-col w-full justify-center overflow-y-hidden pt-10 pb-5" id="yolking-around-pack">
            <p class="leading-normal text-white opacity-80 text-2xl md:text-3xl text-left mt-6">
                <a class="font-bold" style="font-family: Satisfy">Yolking Around </a>
                <span class="uppercase bg-gray-200 text-gray-600 text-xs tracking-wide font-semibold px-2 py-1.5 rounded-md ml-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4 pb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                    </svg>
                  Expansion Pack
                </span>
                <span class="uppercase bg-yellow-400 text-white text-xs tracking-wide font-semibold px-2 py-1.5 rounded-md ml-3 sm:inline-block hidden">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4 pb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
                    </svg>
                  New
                </span>
            </p>
            <p class="leading-normal text-white opacity-60 text-lg md:text-2xl pt-1.5 text-left">
                Add a little spice to your gameplay.
            </p>
        </div>
        <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 xl:grid-cols-3 md:gap-x-8 md:gap-y-10">
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/yolking_around/hotpotato-1.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Hot Potato <i class="opacity-30 text-lg">x1</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        An old classic. If you draw an Exploding Chicken, end your turn by tossing the EC to the next player in line. Now they must defuse it!
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/yolking_around/favorgator-1.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Favor Gator <i class="opacity-30 text-lg">x2</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        The gator with an appetite. Destroys all Favor and Random Chicken cards from the hand of anyone you choose. If someone keeps stealing from you, this is a good way to beam 'em up.
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/yolking_around/scrambledeggs-1.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Scrambled Eggs <i class="opacity-30 text-lg">x2</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        Shake things up a little. Dump everyone's hand into a pot and re-deal the entire deck (the discard deck remains as-is). Player card counts stay the same.
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/yolking_around/superskip-1.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Super Skip <i class="opacity-30 text-lg">x3</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        Effectively skips your turn without having to draw a card, even if you are stuck with multiple turns. Useful for escaping an onslaught of Attack cards.
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/yolking_around/safetydraw-1.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Safety Draw <i class="opacity-30 text-lg">x4</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        End your turn by drawing the first card in the draw deck that <strong>IS NOT</strong> an Exploding Chicken. If there is a 100% chance of an EC, then your turn is skipped.
                    </dd>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="rounded-xl shadow-lg center-card bg-center bg-contain mx-1" style="background-image: url('/public/cards/yolking_around/drawbottom-1.png');"></div>
                </div>
                <div class="ml-4">
                    <dt class="text-xl text-white opacity-80">
                        Draw from the Bottom <i class="opacity-30 text-lg">x4</i>
                    </dt>
                    <dd class="mt-2 text-base text-white opacity-60">
                        Is the top of the deck looking a little too dangerous? End your turn by drawing a card from the bottom of the deck. Plain and simple.
                    </dd>
                </div>
            </div>
        </div>
        {{! Meet the Team }}
        <div class="flex flex-col w-full justify-center overflow-y-hidden pt-20" id="the-team">
            <h1 class="my-4 text-4xl md:text-5xl text-white opacity-80 font-bold leading-tight text-left">
                Meet the <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-red-500 to-yellow-500">Team</span>
            </h1>
            <p class="leading-normal text-white opacity-80 text-lg md:text-2xl mb-8 text-left">
                The im-peck-able team behind Exploding Chickens.
            </p>
        </div>
        <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 xl:grid-cols-3 md:gap-x-8 md:gap-y-10 w-full">
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="w-28 pr-1">
                        <img src="/public/team/radison.jpeg" alt="Member" class="shadow rounded-full max-w-full h-auto align-middle border-none" />
                    </div>
                </div>
                <div class="flex flex-wrap content-center ml-4">
                    <div class="text-white">
                        <p class="text-xl opacity-80">
                            Radison Akerman
                            <a class="inline-block -mb-1.5 opacity-70 no-underline hover:text-underline transform hover:scale-125 duration-300 ease-in-out" href="https://rakerman.com" target="_blank">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 pb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                </svg>
                            </a>
                        </p>
                        <p class="text-lg text-blue-400 opacity-70">
                            Creator + Coding Wizard
                        </p>
                        <p class="text-sm opacity-60 md:w-64">
                            Might fall off an electric skateboard at 20 mph, not once but twice
                        </p>
                    </div>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="w-28 pr-1">
                        <img src="/public/team/sengdao.jpeg" alt="Member" class="shadow rounded-full max-w-full h-auto align-middle border-none" />
                    </div>
                </div>
                <div class="flex flex-wrap content-center ml-4">
                    <div class="text-white">
                        <p class="text-xl opacity-80">
                            Sengdao Inthavong
                            <a class="inline-block -mb-1.5 opacity-70 no-underline hover:text-underline transform hover:scale-125 duration-300 ease-in-out" href="https://sinthavong.studio/" target="_blank">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 pb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                </svg>
                            </a>
                        </p>
                        <p class="text-lg text-blue-400 opacity-70">
                            Graphic Designer
                        </p>
                        <p class="text-sm opacity-60 md:w-64">
                            Might get a yellow card in a soccer game for not wearing a number on their goalkeeping jersey
                        </p>
                    </div>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="w-28 pr-1">
                        <img src="/public/team/vincent.jpeg" alt="Member" class="shadow rounded-full max-w-full h-auto align-middle border-none" />
                    </div>
                </div>
                <div class="flex flex-wrap content-center ml-4">
                    <div class="text-white">
                        <p class="text-xl opacity-80">
                            Vincent Do
                        </p>
                        <p class="text-lg text-blue-400 opacity-70">
                            Game Content
                        </p>
                        <p class="text-sm opacity-60 md:w-64">
                            Might wear a hat because he thinks his haircut is bad
                        </p>
                    </div>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="w-28 pr-1">
                        <img src="/public/team/richard.jpg" alt="Member" class="shadow rounded-full max-w-full h-auto align-middle border-none" />
                    </div>
                </div>
                <div class="flex flex-wrap content-center ml-4">
                    <div class="text-white">
                        <p class="text-xl opacity-80">
                            Richard Yang
                        </p>
                        <p class="text-lg text-blue-400 opacity-70">
                            Game Content
                        </p>
                        <p class="text-sm opacity-60 md:w-64">
                            Might challenge Vincent to an arm wrestling battle anywhere, anytime
                        </p>
                    </div>
                </div>
            </div>
        </div>
        {{! Footer }}
        <div class="w-full pt-16 pb-12 text-sm text-center md:text-left fade-in">
            <h1 class="text-white opacity-70 pb-1 md:float-left md:mr-1">Exploding Chickens <script>document.write(new Date().getFullYear())</script>.</h1>
            <h1 class="text-white opacity-70 pb-1 md:float-left md:mr-1">Made with <i class="fas fa-heart text-red-500"></i> by our <a class="text-blue-400" href="https://github.com/rak3rman/exploding-chickens/graphs/contributors" target="_blank">contributors</a>.</h1>
            <h1 class="text-white opacity-70 pb-1 md:float-right">Release v{{ version }}</h1>
        </div>
    </div>
    <div class="container anim-ele anim-ele-fadein">
        <div x-data="scrollProgress" class="fixed inset-x-0 top-0 z-50">
            <div class="h-1 bg-yellow-500" :style="`width: ${percent}%`"></div>
        </div>
    </div>
</div>
<div data-tf-popover="qWPf6y4Z" data-tf-button-color="#dc2626" data-tf-button-text="Feedback" data-tf-opacity="99" style="all:unset"></div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.2.2/cdn.js" defer></script>
<script src="//embed.typeform.com/next/embed.js"></script>
<script src="/public/js/home.js"></script>
<script src="/public/js/banner.js"></script>
<script>check_banner('{{ bnr_tag }}')</script>
</html>